<!-- App.vue -->
<template>
  <div class="app-container">
    <AMapContainer
      :map-key="yourMapKey"
      :security-js-code="yourSecurityJsCode"
      :markers="markerData"
      :center="mapCenter"
      :zoom="mapZoom"
    >
      <template #default="{ map,AMap }">
          <MapControls :map="map" :a-map="AMap"/>
      </template>
    </AMapContainer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AMapContainer from './components/AMapContainer.vue';
import MapControlsProvider from "./components/MapControlsProvider.vue";
import MapControls from "./components/MapControls.vue";

const yourMapKey = 'ad7a74e876dd95ea875e31a78e945fde';
const yourSecurityJsCode = '7f8858c4e3bd5333e6bb917c7afe6671';
const mapCenter = [116.397428, 39.90923];
const mapZoom = 11;

// 标记点数据
const markerData = ref([
  {
    position: [116.397428, 39.90923],
    title: '天安门广场',
    content: '天安门广场位于北京市中心，是世界上最大的城市广场之一。',
    // 可以添加任意自定义属性
    id: 1,
    type: 'landmark'
  },
  {
    position: [116.407427, 39.90923],
    title: '故宫博物院',
    content: '故宫是中国明清两代的皇家宫殿，旧称紫禁城。',
    id: 2,
    type: 'museum'
  }
]);
</script>

<style scoped>
.app-container{
    width: 100%;
    height: 100%;
}
</style>